<template>
	<view class="page">
		<view class="top">
			<view class="status-bar">
			</view>
		</view>
		<view class="card">
			<view class="sub-title">
				服务全球中小企业
			</view>
			<view class="card-btns s-flex-r-s-c">
				<button class="card-btn s-flex-r-c-c" open-type="contact" @contact="contactFn">
					<image class="icon1" src="/static/img/index/i2.png" alt="" />
					<text class="text">1v1在线咨询</text>
				</button>
				<button class="card-btn s-flex-r-c-c" @contact="contactfn2">
					<text class="text">合作机构外链</text>
				</button>
			</view>
		</view>
		<view class="tabs s-flex-r-c-c">
			<view class="tab-i tab-i1 s-flex-r-c-c" @click="tabHandle(1)" :class="tab==1?'tab-active':''">
				<image v-if="tab==1" class="icon1" src="/static/img/index/i1.png" alt="" />
				<image v-else class="icon1" src="/static/img/index/lou.png" alt="" />
				<text class="text">港中盈</text>
			</view>
			<view class="tab-i tab-i2 s-flex-r-c-c" @click="tabHandle(2)" :class="tab==2?'tab-active':''">
				<image v-if="tab==1" class="icon1" src="/static/img/index/i3.png" alt="" />
				<image v-else class="icon1" src="/static/img/index/home.png" alt="" />
				<text class="text">港中联</text>
			</view>
		</view>
		<view class="list" v-if="tab==1">
			<view class="t-box s-flex-r-s-c">
				<view class="flex1">
					<up-tabs :list="tab2list" @click="tabHandle2" :bgBottom="22" lineWidth="28" lineHeight="9"
						:scrollable="false" :activeStyle="{
						color: '#3333331',
						fontWeight: 'bold',
						whiteSpace:'nowrap',
						transform: 'scale(1.02)'
					}" :inactiveStyle="{
						color: '#333333',
						whiteSpace:'nowrap',
						transform: 'scale(1)'
					}" :lineColor="`url(${lineBg}) 100% 100%`"></up-tabs>
				</view>
				<view class="r s-flex-r-s-c" @click="go('/pages/zixun/zixun')">
					<text class="text">全部</text>
					<image class="r-icon" src="/static/img/index/r1.png" alt="" />
				</view>
			</view>
			<view class="list-box s-flex-r-b-c s-flex-wrap">
				<view class="item" v-for="(item,index) in DataList" :key="index"
					@click="go(`/pages/zixun/details?id=${item.id}&title=${item.name}`)">
					<image class="img" :src="item.image" mode=""></image>
					<view class="tit">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="article" v-if="tab==2">
			<view class="box">
				<view class="box-tit s-flex-r-s-c">
					<image class="icon" src="../../static/img/index/i7.png" mode=""></image>
					<view class="tit s-flex-r-s-c">
						<text>商会介绍</text>
					</view>
				</view>
				<view class="content" v-html="art1.content">
				</view>
			</view>
			<view class="box">
				<view class="box-tit s-flex-r-s-c">
					<image class="icon" src="../../static/img/index/i7.png" mode=""></image>
					<view class="tit s-flex-r-s-c">
						<text>会员介绍</text>
					</view>
				</view>
				<view class="content" v-html="art2.content">
				</view>
				<view class="content2 mt20" @click="handleApply">
					<view class="btn s-flex-r-c-c">
						<text>申请入会</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const lineBg =
		''
	import {
		ref,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	const tab = ref(1)
	const tab2 = ref(0)
	const params = ref({
		page: 1,
		per_page: 10
	})
	const tab2list = ref([])
	const DataList = ref([])

	function tabHandle(i) {
		tab.value = i
	}

	function getTabData() {
		proxy.$request({
			url: 'api/consult/consultSort',
			header: "application/x-www-form-urlencoded",
			data: {}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				tab2list.value = res.data.list.slice(0,4)
				tab2.value = tab2list.value[0].id
				getListData()
			}
		})
	}
	getTabData()

	function getListData() {
		proxy.$request({
			url: 'api/consult/consultManage',
			header: "application/x-www-form-urlencoded",
			data: {
				consult_sort_id:tab2.value,
				page: params.value.page,
				per_page: params.value.per_page,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				DataList.value = res.data.list
			}
		})
	}
	const art1 = ref({})
	const art2 = ref({})

	function getSingleData() {
		proxy.$request({
			url: 'api/consult/single',
			header: "application/x-www-form-urlencoded",
			data: {
				// 1用户协议,2隐私协议3商会介绍4会员介绍
				type_id: 3,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				art1.value = res.data.details
			}
		})
		proxy.$request({
			url: 'api/consult/single',
			header: "application/x-www-form-urlencoded",
			data: {
				// 1用户协议,2隐私协议3商会介绍4会员介绍
				type_id: 4,
			}
		}).then(res => {
			if (res.code == 0) {
				return proxy.$toast(res.msg)
			} else {
				art2.value = res.data.details
			}
		})
	}
	getSingleData()

	function tabHandle2(i) {
		tab2.value = i.id
		getListData()
	}
	// 打开客服会话
	function contactFn(e) {
		console.log('e: ', e)
	}
	function contactfn2(e) {
		// 1 跳转到微信公众号的小程序页面 需要微信公众号AppId和路径
		uni.navigateToMiniProgram({
		  appId: 'wx02cd9b212cf0a1fc', // 公众号的appid
		  path: 'pages/index/index', // 打开的页面路径，这里假设是公众号的首页
		  extraData: {}, // 需要传递给目标小程序的数据
		  success(res) {
		    // 打开成功的回调
		    console.log('打开成功');
		  },
		  fail(err) {
		    // 打开失败的回调
		    console.error('打开失败', err);
		  }
		});
		// 2.在微信公众号使用h5页面 跳转到该页面
		uni.navigateTo({
			url:"https://公众号H5Url",
			success() {
				console.log('跳转成功')
			},
			fail() {
				console.log('跳转失败')
			}
		})
	}

	function handleApply() {
		uni.navigateTo({
			url: '/pages/apply/applyOne'
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		background: #F8F8F8;
	}

	.r-icon {
		width: 24rpx;
		height: 24rpx;
	}

	.top {
		width: 750rpx;
		height: 690rpx;
		background: url(https://oss.bigchun.com/img/gangzhongying/index-bg1.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.card {
		margin-left: 27rpx;
		margin-top: -146rpx;
		width: 686rpx;
		height: 300rpx;
		background: url(https://oss.bigchun.com/img/gangzhongying/index-g1.png) 0 0 no-repeat;
		background-size: 100% 100%;
		padding-top: 94rpx;
		box-sizing: border-box;

		.sub-title {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 33rpx;
			text-align: center;
			margin-bottom: 18rpx;
		}
		.card-btns{
			padding: 0 16rpx;
		}
		.card-btn {
			margin: 0 auto;
			width: 298rpx;
			height: 96rpx;
			background: linear-gradient(128deg, #FF963B 0%, #FF7D43 100%);
			border-radius: 48rpx;

			.icon1 {
				width: 36rpx;
				height: 36rpx;
				margin-right: 6rpx;
			}

			.text {
				height: 44rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}

	.tabs {
		border-radius: 8rpx;
		margin: 0 33rpx;
		overflow: hidden;

		.tab-i {
			width: 342rpx;
			height: 88rpx;
			background: #FFFFFF;
			color: #666666;

		}

		.tab-active {
			background: #FF8538;
			color: #FFFFFF;
		}

		.icon1 {
			width: 36rpx;
			height: 36rpx;
			margin-right: 4rpx;
		}

		.text {
			font-weight: 500;
			font-size: 28rpx;
			line-height: 33rpx;
			text-align: center;
		}
	}

	.list {
		padding: 38rpx 0;
		margin-top: 24rpx;
		border-radius: 20rpx 20rpx 0 0;
		width: 750rpx;
		background: #FFFFFF;

		.tabs2 {
			.tab2item {
				flex: 1;
				text-align: center;
				font-weight: 400;
				font-size: 28rpx;
				height: 40rpx;
				color: #333333;
				line-height: 33rpx;
			}

			.tab2-active {
				font-weight: bold;
				background: url(https://oss.bigchun.com/img/gangzhongying/index-i4.png) 32rpx 30rpx no-repeat;
				background-size: 82rpx 28rpx;
			}
		}

		.t-box {
			overflow: hidden;
			margin-bottom: 12rpx;

			.r {
				// margin-top: -4rpx;
				margin-left: 0rpx;
				margin-right: 4rpx;

				.text {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 28rpx;
					margin-right: 4rpx;
				}
			}
		}

		.list-box {
			padding: 20rpx 32rpx;

			.item {
				width: 330rpx;
				margin-bottom: 30rpx;

				.img {
					width: 330rpx;
					height: 440rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.tit {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 48rpx;
				}
			}
		}
	}

	.article {
		margin-top: 18rpx;
		background: #FFFFFF;
		padding: 50rpx 32rpx;

		.box {
			.box-tit {
				margin: 8rpx 0;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				.tit {
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					width: 184rpx;
					height: 84rpx;
					background: url(https://oss.bigchun.com/img/gangzhongying/index-i-bg.png) 74rpx 0rpx no-repeat;
					background-size: 124rpx 84rpx;
				}
			}

			.content {
				padding: 10rpx 0;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 44rpx;
				text-align: left;
			}

			.content2 {
				padding-top: 48rpx;

				.btn {
					width: 686rpx;
					height: 108rpx;
					background: #1F2967;
					border-radius: 54rpx 54rpx 54rpx 54rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}
	}
</style>